<template>
	<div class="b-cont">
		<div>
			<sections 
				class="b-cells" 
				title="客户反馈" 
				m-color="#46CDCF" 
				content-height="auto"
				:show-save="true"
				type="save_lawcasecomplain"
				@save="handleAction">
				<div v-empty="list.length <= 0" style="min-height: 500px;">
					<flexbox 
						:gutter="0" 
						wrap="wrap" 
						style="padding: 10px 8px;margin:25px 0;"
						v-if="list.length > 0"
						v-for="(item,index) in list"
						:key="index">
						<table
							class="table table-hover"
							v-loading="loading">
							<tbody>
								<tr>
									<td class="tdleft" width="15%">反馈原因</td>
									<td colspan="3">{{item.complain_reason}}</td>
								</tr>
								<tr>
									<td class="tdleft" width="15%">反馈内容</td>
									<td colspan="3">{{item.complain_content}}</td>
								</tr>
								<tr>
									<td class="tdleft" width="15%">创建人</td>
									<td width="35%">{{item.create_user_id[0].username}}</td>
									<td class="tdleft" width="15%">创建时间</td>
									<td width="35%">{{item.create_time| filterTimestampToFormatTime("YYYY-MM-DD HH:mm")}}</td>
								</tr>
								<tr v-if="item.process_result">
									<td class="tdleft" width="15%">处理结果</td>
									<td width="35%">{{item.process_result}}</td>
									<td class="tdleft" width="15%">投诉类别</td>
									<td width="35%">{{item.complaint_type}}</td>
								</tr>
								<tr v-if="item.handle_result">
									<td class="tdleft" width="15%">处理方案</td>
									<td colspan="3">{{item.handle_result}}</td>
								</tr>
								<tr v-if="item.handle_time">
									<td class="tdleft" width="15%">处理人</td>
									<td width="35%">{{item.handle_role_id[0].username}}</td>
									<td class="tdleft" width="15%">处理时间</td>
									<td width="35%">{{item.handle_time| filterTimestampToFormatTime("YYYY-MM-DD HH:mm")}}</td>
								</tr>
							</tbody>
						</table>
						<div style="margin-top: 10px;width: 100%;display: flex;justify-content: flex-end;align-items: flex-end;">
							<el-button 
								type="primary" 
								plain 
								v-if="allAuth.lawcase.update_lawcasecomplain"
								@click="handleAction({'type':'update_lawcasecomplain','data':item})">修改</el-button>
							<el-button 
								type="danger" 
								plain 
								v-if="allAuth.lawcase.del_lawcasecomplain"
								@click="handleAction({'type':'del_lawcasecomplain','data':item})">删除</el-button>
						</div>
					</flexbox>
				</div>
			</sections>
		</div>
		<!-- dialog弹窗 -->
		<dialog-form
			:dialog-visible="dialogForm"
			:title="title"
			ref="crmform"  
			:crm-type="crmType"
			:fields-data = "fieldsData"
			:action="action"
			:form-data="formData"
			@close = "closeDialog"
			@save-dialog="saveDialog">
		</dialog-form>
	</div>
</template>

<script>
	import Sections from '../../customer/Sections'
	import moment from 'moment'
	import { mapGetters } from 'vuex'
	import DialogForm from '@/components/FromData/dialogForm'
	// API
	import { filedGetField } from '@/api/setting/setting'
	import {
		crmLawcaseLawcasecomplainList,
		crmLawcaseLawcasecomplainSave,
		crmLawcaseLawcasecomplainUpdate,
		crmLawcaseLawcasecomplainDel
	} from '@/api/lawcase/lawcase'
	
	
	export default {
		/** 客户管理 的 基本信息*/
		name: 'CRMBaseInfo',
		components: {
			Sections,
			DialogForm
		},
		filters: {
			
		},
		mixins: [],
		props: {
			/** 模块ID */
			id: [String, Number],
			/** 没有值就是全部类型 有值就是当个类型 */
			crmType: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				list: [],
				loading:false,
				
				// 债务信息
				zhaiwuList:[],
				
				// dialog弹窗
				dialogForm:false,
				title:"",
				dialogType:"",
				fieldsData:[],
				action:{ type: '',relevant:'' },
				formData:{},
			}
		},
		computed: {
			...mapGetters(['allAuth']),
		},
		watch: {
			id: function(val) {
				this.getBaseInfo()
			}
		},
		mounted() {
			this.$bus.$on("refresh-detail",()=>{
			   return this.getBaseInfo()
			})
			this.getBaseInfo()
		},
		activated: function() {},
		deactivated: function() {},
		methods: {
			
			// 获取基础信息
			getBaseInfo() {
				this.loading = true
				crmLawcaseLawcasecomplainList({
						lawcase_id: this.id
					})
					.then(res => {
						// console.log(res.data);
						this.list = res.data
						this.loading = false
					})
					.catch(() => {
						this.loading = false
					})
			},
			
			// 添加信息
			handleAction(item){
				switch (item.type){
					case "save_lawcasecomplain":
						this.title = "新增客户反馈"
						this.dialogForm = true
						this.action = { type: 'save',relevant:'lawcasecomplain'  ,actiontype:32}
						break;
						
					case "update_lawcasecomplain":
						this.title = "修改客户反馈"
						this.formData = JSON.parse(JSON.stringify(item.data))
						this.dialogForm = true
						this.action = { type: 'update',relevant:'lawcasecomplain'  ,actiontype:33}
						break;
						
					case "del_lawcasecomplain":
						this.delInfo({"type":item.type,"data":item.data})
						break;
				}
			},
			
			// 弹窗操作
			closeDialog(){
				this.title = ""
				this.dialogForm = false
				this.formData = {}
			},
			saveDialog(item){
				let data = item.data
				data["lawcase_id"] = this.id
				let request
				if(item.type == "save_lawcasecomplain"){
					request = crmLawcaseLawcasecomplainSave
				}else if(item.type == "update_lawcasecomplain"){
					request = crmLawcaseLawcasecomplainUpdate
				}
				
				request(data)
					.then(res => {
						this.$message.success(res.data)
						this.closeDialog()
						this.getBaseInfo()
					})
			},
			delInfo(item){
				let request
				if(item.type == "del_lawcasecomplain"){
					request = crmLawcaseLawcasecomplainDel
				}
				this.$confirm('确定进行此操作吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					request({
						id: item.data.id
					})
					.then(res => {
						this.$message.success(res.data)
						this.getBaseInfo()
					})
					.catch(() => {})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					})
				})
			},
			
			// 预览图片
			previewImg(list, index) {
				this.$bus.emit('preview-image-bus', {
					index: index,
					data: list.map(function(item, index, array) {
						item.url = item.file_path
						return item
					})
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.b-cont {
		position: relative;
		padding: 0 50px 20px 20px;
	}

	.b-cells {
		margin-top: 25px;
	}

	.b-cell {
		padding: 0 10px;

		.b-cell-b {
			width: auto;
			padding: 8px;

			.b-cell-name {
				width: 100px;
				margin-right: 10px;
				font-size: 13px;
				flex-shrink: 0;
				color: #777;
			}

			.b-cell-value {
				font-size: 13px;
				color: #333;
				white-space: pre-wrap;
				word-wrap: break-word;
			}

			.b-cell-foot {
				flex-shrink: 0;
				display: block;
				width: 15px;
				height: 15px;
				margin-left: 8px;
			}
		}
	}

	.f-item {
		padding: 3px 0;
		height: 25px;

		.f-img {
			position: block;
			width: 15px;
			height: 15px;
			padding: 0 1px;
			margin-right: 8px;
		}

		.f-name {
			color: #666;
			font-size: 12px;
			margin-right: 10px;
		}
	}
	.table{
		width: 100%;
		font-size: 13px !important;
	}
	
	.table td {
		vertical-align: middle;
		padding: 15px 10px;
		line-height: 20px;
		border: 1px solid #EEEEEE;
		white-space: pre-wrap;
		word-break: break-all;
	}
	.table td.tdleft {
		text-align: center;
		background: #f6faff;
	}
	.table tr:hover {
		background: #f6faff;
	}
	
</style>
